<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影院后台界面</title>
  <script src="../js/vue.min.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/jquery.js"></script>
  <!-- 引入样式 -->
    <link rel="stylesheet" href="../ele-2.15.7/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="../ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="">
            <el-image src="../image/YYDS.png" style="height: 80px;width: 200px;float: right;margin-bottom: 50px" ></el-image>
            <h3>尊敬的管理员{{name}}，欢迎回来</h3>
        </el-header>
        <el-container>
            <el-aside width="150px" >
                <el-menu
                        active-text-color="#0000ff"
                        text-color="#a0cfff"
                        default-active="1"
                        class="el-menu-vertical-demo">
                    <el-menu-item index="1">
                        <a href="user.html">
                            <i class="el-icon-menu"></i>
                            <span slot="title">用户管理</span>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="2" >
                        <a href="movie.html">
                            <i class="el-icon-document"></i>
                            <span slot="title">影片管理</span>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <a href="arrange.html">
                            <i class="el-icon-setting"></i>
                            <span slot="title">影片安排</span>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <a href="cinema.html">
                            <i class="el-icon-location"></i>
                            <span slot="title">影院管理</span>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <a href="indent.html">
                            <i class="el-icon-menu"></i>
                            <span slot="title">订单管理</span>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <a href="AboutMe.html">
                            <i class="el-icon-setting"></i>
                            <span slot="title">友情链接管理</span>
                        </a>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <el-container>
                    <el-header>
                        <el-form :inline="true" class="demo-form-inline" style="display: flex; align-items: center">
                            <el-form-item label="影片名字">
                                <el-input v-model="moviename" placeholder="影片名字"></el-input>
                            </el-form-item>
                            <el-form-item label="影片年代">
                                <el-input v-model="moviedate" placeholder="影片年代"></el-input>
                            </el-form-item>
                            <el-form-item label="地区">
                                <el-input v-model="area" placeholder="地区"></el-input>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-input v-model="type" placeholder="类型"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click.prevent="query(1)">查询</el-button>
                                <el-button type="primary" @click.prevent="dialogFormVisible=true" >添加</el-button>
                            </el-form-item>
                        </el-form>
                    </el-header>
                    <el-container>
                        <el-main>
                            <el-table :data="tableData.data" style="width: 100%" border>
                                <el-table-column prop="movieid" label="电影编号"></el-table-column>
                                <el-table-column prop="moviename" label="电影名字"></el-table-column>
                                <el-table-column prop="moviedesc" label="电影描述"></el-table-column>
                                <el-table-column prop="moviegrade" label="电影评分"></el-table-column>
                                <el-table-column prop="movieimage" label="图片">
                                    <template slot-scope="scope">
                                        <el-image
                                                style="width: 80px; height: 100px"

                                                :src="'../'+scope.row.movieimage"
                                                fit="contain"></el-image>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="moviedate" label="年份"></el-table-column>
                                <el-table-column prop="area" label="地区"></el-table-column>
                                <el-table-column prop="type" label="类型"></el-table-column>
                                <el-table-column
                                        fixed="right"
                                        label="操作"
                                        width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="modify(scope.row)"  type="text" size="small">编辑</el-button>
                                        <el-popconfirm title="请问是否经逻辑删除, 否则使用物理删除？"
                                                       confirm-button-text="逻辑删除"
                                                       cancel-button-text="物理删除"
                                                       @confirm="remove(scope.row,'逻辑删除')"
                                                       @cancel="remove(scope.row,'物理删除')" >
                                            <el-button slot="reference" type="text" size="small">删除</el-button>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </el-main>
                    </el-container>
                    <el-footer style="text-align: right">
                        <el-pagination :page-size="pageSize" @current-change="query" @size-change="sizeChange"
                                       background :page-sizes="[2,3,4,5]"
                                       layout="sizes, prev, pager, next"
                                       :total="tableData.total"
                                       :current-page.sync="tableData.page" >
                        </el-pagination>
                    </el-footer>
                    <el-dialog title="用户管理" :visible.sync="dialogFormVisible">
                        <div style="display: flex; justify-content: space-around;">
                            <el-form >
                                <el-form-item label="电影名称" :label-width="formLabelWidth">
                                    <el-input v-model="editMovie.moviename" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="电影描述" :label-width="formLabelWidth">
                                    <el-input v-model="editMovie.moviedesc" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="评分" :label-width="formLabelWidth">
                                    <el-input v-model="editMovie.moviegrade" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="年代" :label-width="formLabelWidth">
                                    <el-input v-model="editMovie.moviedate" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="地区" :label-width="formLabelWidth">
                                    <el-input v-model="editMovie.area" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="类型" :label-width="formLabelWidth">
                                    <el-input v-model="editMovie.type" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <el-upload name="image"
                                       class="avatar-uploader"
                                       action="../UploadImageServlet.s"
                                       :show-file-list="false"
                                       :on-success="handleAvatarSuccess"
                                       :before-upload="beforeAvatarUpload">
                                <img v-if="editMovie.movieimage" :src="'../'+editMovie.movieimage" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="saveMovie">确 定</el-button>
                        </div>
                    </el-dialog>
                </el-container>
            </el-main>
        </el-container>
    </el-container>
</div>

<script>
    var v=new Vue({
        el:"#app",
        data:{
            tableData:{page:1},
            pageSize:2,
            moviename:"",
            moviedate:"",
            area:"",
            type:"",
            editMovie:{moviename:"",moviedesc:"",moviegrade:"",movieimage:"",moviedate:"",area:"",type:""},
            dialogFormVisible:false,
            formLabelWidth: "100px",
            name:""
        },

        created(){
            this.query(1),
             axios.get("../GetUserServlet.s").then(res=>{
                 this.name = res.data
             })
        },
        methods:{
            sizeChange(size){
                this.pageSize=size,
                    this.query(1)
            },
            query (page){
                axios({
                    url:"../QueryMovieServlet.s",
                    params: {
                        moviename:this.moviename,
                        moviedate: this.moviedate,
                        area:this.area,
                        type:this.type,
                        currentPage:page,
                        pageSize:this.pageSize
                    }
                }).then((res)=>{
                    this.tableData=res.data;
                    this.tableData.page = page;
                });
            },
            saveMovie(){
                var params=new URLSearchParams();

                for(let name in this.editMovie){
                    params.append(name,this.editMovie[name]);
                }
                axios.post("../SaveMovieServlet.s",params).then(res=>{
                    if(res.data.code==1){
                        this.$message(res.data.msg);
                        this.query(1);
                        this.dialogFormVisible=false;
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            },
            handleAvatarSuccess(res, file) {
                // res 是后台返回的结果 , 但是 此 res != axios.res
                // res ==> axio.res.data
                // res.data ==> webpath
                this.editMovie.movieimage = res.data;
                this.$forceUpdate();
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image/') > -1;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像只能是图片格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                //  返回 false 终止上传
                return isJPG && isLt2M;
            },
            create(){
                this.editMovie={moviename:"",moviedesc:"",moviegrade:"",movieimage:"",moviedate:"",area:"",type:""},
                    this.dialogFormVisible=true;
            },
            modify(movie){
                // 复制 book 的属性 => editBook
                for (let name in movie) {
                    this.editMovie[name] = movie[name];
                }
                this.dialogFormVisible = true;
            },
            remove(movie,flag){
                this.$confirm('此操作将'+flag+'该影片, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.get("../RemoveMovieServlet.s",{
                        params : {
                            movieid : movie.movieid,
                            flag:flag
                        }
                    }).then(res=>{
                        this.$message('已删除!');
                        this.query(1);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
        }

    })
</script>
<style>
    html, body, #app {
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    .el-container {
        height: 100%;
    }

</style>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
</body>
</html>